<template>
  <div class="personnel-table">
    <h2>教练信息管理</h2>
    <div class="controls">
      <button class="add-coach-btn" data-bs-toggle="modal" data-bs-target="#addCoachModal">增加教练</button>
      <div class="search-container">
        <button class="search-btn" @click="search">查询</button>
        <input type="text" class="search-input" v-model="searchValue" placeholder="查询教练" />
        <button class="refresh-btn" @click="fetchCoaches">返回</button>
      </div>
    </div>
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>图片</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>身份证</th>
        <th>住址</th>
        <th>电话</th>
        <th>特色</th>
        <th>入职时间</th>
        <th>操作</th>
        <th>上传头像</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(coach, index) in coachInfo" :key="index">
        <td>{{coach.id}}</td>
        <td>
          <img :src="coach.image" class="coach-image" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.username }}</template>
          <input v-else type="text" class="form-control" v-model="coach.username" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.sex }}</template>
          <select v-else class="form-control" v-model="coach.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.age }}</template>
          <input v-else type="number" class="form-control" v-model="coach.age" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.id_code }}</template>
          <input v-else type="text" class="form-control" v-model="coach.id_code" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.address }}</template>
          <input v-else type="text" class="form-control" v-model="coach.address" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.tel }}</template>
          <input v-else type="text" class="form-control" v-model="coach.tel" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.sellpoint }}</template>
          <input v-else type="text" class="form-control" v-model="coach.sellpoint" />
        </td>
        <td>
          <template v-if="!coach.editing">{{ coach.time }}</template>
          <input v-else type="datetime-local" class="form-control" v-model="coach.time" />
        </td>
        <td class="actions">
          <template v-if="!coach.editing">
            <button class="edit-btn" @click="coach.editing = !coach.editing">编辑</button>
            <button class="delete-btn" @click="deleteCoach(coach)">删除</button>
          </template>
          <template v-else>
            <button class="save-btn" @click="saveEditedCoach(coach)">保存</button>
            <button class="cancel-btn" @click="coach.editing = !coach.editing">取消</button>
          </template>
        </td>
        <td>
          <input
              type="file"
              @change="handleFileUpload($event, coach)"
              class="file-input"
              :id="getComputedID(coach)"
              style="display: none"
          />
          <label :for="getComputedID(coach)" class="upload-label">上传头像</label>
        </td>
      </tr>
      </tbody>
    </table>
  </div>


  <!-- 增加教练模态框 -->
  <div class="modal fade" id="addCoachModal" tabindex="-1" aria-labelledby="addCoachModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title" id="addCoachModalLabel">增加教练</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>姓名</label>
              <input type="text" class="form-control" v-model="newCoach.username" />
            </div>
            <div class="form-group">
              <label>性别</label>
              <select class="form-control" v-model="newCoach.sex">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="form-group">
              <label>年龄</label>
              <input type="number" class="form-control" v-model="newCoach.age" />
            </div>
            <div class="form-group">
              <label>身份证</label>
              <input type="text" class="form-control" v-model="newCoach.id_code" />
            </div>
            <div class="form-group">
              <label>住址</label>
              <input type="text" class="form-control" v-model="newCoach.address" />
            </div>
            <div class="form-group">
              <label>电话</label>
              <input type="text" class="form-control" v-model="newCoach.tel" />
            </div>
            <div class="form-group">
              <label>卖点</label>
              <input type="text" class="form-control" v-model="newCoach.sellpoint" />
            </div>
            <div class="form-group">
              <label>入职时间</label>
              <input type="datetime-local" class="form-control" v-model="newCoach.time" />
            </div>
          </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" @click="addCoach">保存</button>
        </div>

      </div>
    </div>
  </div>


</template>

<script>
import './css/CoachInfo.css';
import CoachInfo from './js/CoachInfo';
export default CoachInfo;
</script>

<style scoped>

</style>